<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>JavaScript访问DOM数案例</h3>
		<h5>JavaScript使用api的4种方式：访问h3标签，a标签，获取它们内容。</h5>   
		<h5>tag、className、name、id</h5>
		
		<a href="http://www.taobao.com" target="_blank">淘宝</a>
		<a class="jd" href="http://www.jd.com" target="_blank">京东</a>
		<a name="pdd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
		<a id="cgb" href="http://act.codeboy.com" target="_blank">Java培优</a>
		
		<script type="text/javascript">
			window.alert('使用js获取页面元素的内容');//BOM中提供弹出框api
			
			//获取页面的a标签,按照tagName方式返回是一个数组
			//第一个元素:arr[0],下标从0开始
			
			//第一种方式:tagName方式
			console.log(document.getElementsByTagName("a")[0].innerText);
			console.log(document.getElementsByTagName("a")[0].href);
			
			//第二种方式:classname方式
			console.log(document.getElementsByClassName("jd")[0].innerText);
			console.log(document.getElementsByClassName("jd")[0].href);
			
			//第三中方式:name方式
			console.log(document.getElementsByName("pdd")[0].innerText);
			console.log(document.getElementsByName("pdd")[0].href);
			
			//第四种方法:id方式，而这种方式获得就是一个值
			console.log(document.getElementById("cgb").innerText);
			console.log(document.getElementById("cgb").href);
			
			//淘宝改成天猫
//			document.getElementsByTagName("a")[0].innerText="百度"
			
			//定义变量a
			var a = document.getElementsByTagName("a")[0];
			a.innerText="百度";
			a.href="http://www.baidu.com";
		</script>
	</body>
</html>
